<template>
  <div>
    <div id="app" class="content-wrapper" v-cloak>
      <!--<loading v-show="$store.state.isLoading"></loading>-->
      <loading v-show="loading"></loading>
      <!-- Navigation -->
      <div class="appHeader">
        <div v-show="doError" class="alertTitleDiv">
          <i class="iconfont icon-quxiao1 m-r-5" v-show="errorAlert"></i>
          <i class="iconfont icon-zhengque m-r-5" v-show="!errorAlert"></i>
          <span v-show="errorAlert">操作失败</span>
          <span v-show="!errorAlert">操作成功</span>
        </div>
        <div class="header">
          <!--test-->
          <ul v-show="false" id="metismenu">
            <li class="mm-active">
              <a class="has-arrow" href="#" aria-expanded="true">Menu 1</a>
              <ul>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
              <ul>
              </ul>
            </li>
          </ul>
          <!--test-->
          <div @click="goBigcreen">

            <div>
            </div>
            <img src="./assets/zk_logo_use.png" alt="">
          </div>
          <div>
            <span style="color: white;font-size: 17px;margin-left: 9px">{{$store.state.system_name_en+''+$store.state.system_name_cn}}</span>
          </div>
        </div>
        <!--新菜单-->
        <div class="newMenuBox">
          <div :class="{'newMenuActive':menuIndex==index}" @click.stop="changeMenu(item,index)"
               v-for="(item,index) in extendsRoutes">{{item.name}}
          </div>
        </div>
        <div class="header-right" id="mainPage">

          <div class="pull-left user p-rl" style="left: 0;">
            <span class="el-dropdown-link msg" ref="showBtn" id="showBtn" @click="showBtn()">
              {{$store.state.userName || "user"}}<i id="showBtnIcon"
                                                    class="iconfont icon-htmal5icon03 m-l-5 close-icon-up"
                                                    :class="{'close-icon-drop':showLog}"></i>
            </span>
            <span v-show="showLog" ref="logoOutBtn" class="logout" id="hideBtn1" @click="changePwd">修改密码</span>
            <span v-show="showLog" ref="logoOutBtn" class="logout" style="top: 4.5rem;" id="hideBtn"
                  @click="logOut">退出</span>
          </div>
        </div>
      </div>
      <div class="f-s-14 m-b-5 header-title p-rl">
        <span class="activePageTitle">
          <span :style="{'z-index':10-index}" :class="{'menuActive':thisPagePath==item.path}" v-for="(item,index) in menuItem.child">
            <router-link :to="item.path">{{item.name}}</router-link>
          </span>
        </span>
      </div>
      <div id="wrapper">
        <div class="container-fluid">
          <router-view :didNum="didNum" :deviceId="deviceId" @login="isLogin" v-if="isRouterAlive"></router-view>
        </div>
      </div>
    </div>
    <!--<footer class="footer text-center">Copyright © 2018 f7sys. All Rights Reserved. 京ICP备05048969号 V1.0.08.20-->
    <!--</footer>-->
    <!--重置密码-->
    <el-dialog
      title="修改密码"
      ref="dialog"
      v-dialogDrag
      class="f-s-15"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="30%">
      <i class="iconfont icon-tianjia-" style="position: absolute;top: 13px;left: 10px;color: #81939F;"></i>
      <div class="f-s-13" v-show="showError" style="text-align: center;    margin-bottom: 20px;
    color: #f00;">{{errorMessage}}
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
        <el-form-item label="原密码：" prop="oldPwd">
          <el-input v-model="ruleForm.oldPwd" autocomplete="off" show-password placeholder="长度6-10个字符"></el-input>
        </el-form-item>
        <el-form-item label="新密码：" prop="newPwd">
          <el-input type="password" v-model="ruleForm.newPwd" autocomplete="off" placeholder="长度6-10个字符"></el-input>
        </el-form-item>
        <el-form-item label="确认密码：" prop="twice">
          <el-input type="password" v-model="ruleForm.twice" autocomplete="off" placeholder="长度6-10个字符"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm('ruleForm')">保 存</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
  import loading from './components/Loading'
  import Vue from 'vue'
  // src/App.vue
  // import fakeClickOutSide from './mixins/fackClickOutSide.js'
  export default {
    name: 'App',
    // mixins: [fakeClickOutSide],
    provide() {
      return {
        reload: this.reload
      }
    },
    components: {loading},
    data() {
      var checkTwice = (rule, value, callback) => {
        if (value != this.ruleForm.newPwd) {
          return callback(new Error('两次密码输入不一致！'));
        } else {
          callback();
        }
      };
      return {
        id: this.$store.state.id,
        isLoading: this.$store.state.isLoading,
        sidebarNav: [],
        activePage: [],
        thisPagePath:"",
        // doError:false,//操作错误提示
        // errorAlert:false,
        doErrorMessage: "服务器错误",
        dialogVisible: false,
        extendsRoutes: [],
        extendsRoutes1: [],
        showNavbar: false,
        firstEnter: true,
        hoverIndex: "",
        isRouterAlive: true,
        activeIndex: 1,
        activeIndex2: 0,
        errorMessage: "",
        showError: false,
        nodeList: [],
        deviceList: [],
        nodeId: "",
        deviceId: "",
        deviceName: "",
        didNum: "",
        userType: "",
        menuIndex:0,
        menuItem: "",
        showLog: false,
        navPath: [],
        activeId: sessionStorage.getItem('activeId') || 0,
        hasChildren: true,
        activeItem: sessionStorage.getItem('activeItem') || 0,
        ruleForm: {
          oldPwd: '',
          newPwd: '',
          twice: '',
        },
        rules: {
          oldPwd: [
            {required: true, message: '请输入原密码', trigger: ['blur', 'change']},
            {min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: ['blur', 'change']}
          ],
          newPwd: [
            {required: true, message: '请输入新密码', trigger: ['blur', 'change']},
            {min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: ['blur', 'change']}
          ],
          twice: [
            {required: true, message: '再次输入新密码', trigger: ['blur', 'change']},
            {validator: checkTwice, trigger: ['blur', 'change']},
          ],
        },
      }
    },
    created() {
      // this.getMenu();
      //存菜单
      this.$router.addRoutes(this.$router.options.routes);
      this.$store.commit("setName", localStorage.getItem('advertiser_id'))
      // this.getMenuList();
      this.$nextTick(() => {
        window.onresize = function () {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          document.getElementsByTagName("html")[0].style.fontSize = h / 50 + "px";
        }
        // this.getDevice();
      });
    },
    computed: {
      menuIndex() {
        if (localStorage.getItem("menuIndex")) {
          return localStorage.getItem("menuIndex");
        } else {
          return 0;
        }
      },
      menuItem() {
        if (localStorage.getItem("menuItem")) {
          return JSON.parse(localStorage.getItem("menuItem"));
        } else {
          return "";
        }
      },
      doError() {
        return this.$store.state.doError;
      },
      errorAlert() {
        return this.$store.state.errorAlert;
      },
      loading(){
        return this.$store.state.isLoading;
      },
      isLoad() {
        return this.$store.state.isLoad;
      }
    },
    //获取屏幕高度
    beforeMount() {
      let h = document.documentElement.clientHeight || document.body.clientHeight;
      // console.log(h, 'clientHeight');
      document.getElementsByTagName("html")[0].style.fontSize = h / 50 + "px";
    },
    mounted() {
      this.$nextTick(() => {
        if (localStorage.getItem("menuIndex")) {
          this.menuIndex=localStorage.getItem("menuIndex");
        } else {
          this.menuIndex=0;
        }
        if (localStorage.getItem("menuItem")) {
          this.menuItem=JSON.parse(localStorage.getItem("menuItem"));
        } else {
          this.menuItem="";
        }

        if(this.$route.path==='/' && localStorage.getItem('thisPage')){
          let path=localStorage.getItem('thisPage');
          this.$router.push(path);
        }else{
          localStorage.setItem('thisPage',this.$route.path);
        }
        // $("#metismenu").metisMenu();
        this.getMenu();
        this.activeIndex2 = localStorage.getItem("activeMenu");
        this.activeIndex = localStorage.getItem("activeIndex");
        let hideBtn = this.$refs.showBtn;
        let btn = this.$refs.logoOutBtn;
        let that = this;
        document.addEventListener('click', (e) => {
          if ($(e.target).attr("id") != 'hideBtn') {
            if ($(e.target).attr("id") == 'showBtn' || $(e.target).attr("id") == 'showBtnIcon') {
              this.showLog = !this.showLog;
              return;
            }
            this.showLog = false;
          }
        });
      });
    },
    watch: {
      doError() {
        let that = this;
        window.setTimeout(function () {
          that.$store.commit("setDoError", false);
        }, 3000)
      },
      dialogVisible(newVal) {
        if (!newVal) {
          this.showError = false;
          this.errorMessage = '';
          this.ruleForm.oldPwd = '';
          this.ruleForm.newPwd = '';
          this.ruleForm.twice = '';
        }
      },
      'ruleForm.newPwd'(newVal, oldVal) {
        this.$refs['ruleForm'].validate((valid) => {
          if (this.ruleForm.twice != this.ruleForm.newPwd) {
            return false;
          }
        });
      },
      activeIndex2(newVal, oldVal) {
        localStorage.setItem("activeMenu", newVal);
        localStorage.setItem("activeIndex", String(newVal).split("-")[0]);
      },
      isLoad(newVal, oldVal) {
        if (newVal == true) {
          this.getDevice();
          this.getMenu();
          this.activeIndex2 = 0;
          this.activeIndex = 1;
        }
      },
      sidebarNav(newVal, oldVal) {
        this.$nextTick(() => {
          $("#side-menu").metisMenu();
        })
      },
      nodeList(newVal, oldVal) {
        this.$nextTick(() => {
          // if (localStorage.getItem('nodeId')) {
          //   this.nodeId = localStorage.getItem("nodeId");
          //   let arr = [];
          //   for (let i = 0; i < newVal.length; i++) {
          //     arr.push(newVal[i].id);
          //   }
          //   if (arr.indexOf(this.nodeId) < 0) {
          //     this.nodeId = newVal[0] && newVal[0].id || "";
          //   }
          // } else {
          //   this.nodeId = newVal[0] && newVal[0].id || "";
          // }
        })
      },
      deviceList(newVal, oldVal) {
        this.$nextTick(() => {
          if (localStorage.getItem('deviceId')) {
            this.didNum = localStorage.getItem("didNum");
            this.deviceId = localStorage.getItem("deviceId");
            this.deviceName = localStorage.getItem("deviceName");
            let arr = [];
            for (let i = 0; i < newVal.length; i++) {
              arr.push(newVal[i].id);
            }
            if (arr.indexOf(this.deviceId) < 0) {
              this.didNum = newVal[0] && newVal[0].didNum || "";
              this.deviceId = newVal[0] && newVal[0].id || "";
              this.deviceName = newVal[0] && newVal[0].name || "";
            }
          } else {
            this.didNum = newVal[0] && newVal[0].didNum || "";
            this.deviceId = newVal[0] && newVal[0].id || "";
            this.deviceName = newVal[0] && newVal[0].name || "";
            localStorage.setItem("didNum",this.didNum);
            localStorage.setItem("deviceId",this.deviceId);
            localStorage.setItem("deviceName",this.deviceName);
          }
        })
      },
      $route(to, from) {
        this.$nextTick(()=>{
          console.log(this.$route.path,'url');
          this.thisPagePath=this.$route.path;
          this.activePage.splice(0, this.activePage.length);
          let path = this.$route.path;
          let arr = this.extendsRoutes;
          let activePath = false;//判断当前页面是否在菜单数据中
          for (let i = 0; i < arr.length; i++) {
            //一级标题
            if (arr[i].path == path) {
              activePath = true;
              this.activePage.push({name: arr[i].name, path: arr[i].path,});
              //监听路由变化改变菜单active
              // this.activeIndex2 = arr[i].index;
              this.activeIndex2 = i;
            } else {
              // 二级标题
              let arr1 = arr[i].child;
              for (let j = 0; j < arr1.length; j++) {
                if (arr1[j].path == path) {
                  activePath = true;
                  this.activePage.push({name: arr[i].name, path: arr[i].path,});
                  this.activePage.push({name: arr1[j].name, path: arr1[j].path,});
                  //监听路由变化改变菜单active
                  this.activeIndex2 = arr1[j].index;
                } else {
                  //三级标题
                  let arr2 = arr1[j].child;
                  for (let k = 0; k < arr2.length; k++) {
                    if (arr2[k].path == path) {
                      activePath = true;
                      this.activePage.push({name: arr[i].name, path: arr[i].path,});
                      this.activePage.push({name: arr1[j].name, path: arr1[j].path,});
                      this.activePage.push({name: arr2[k].name, path: arr2[k].path,});
                      //监听路由变化改变菜单active
                      this.activeIndex2 = arr2[k].index;
                    }
                  }
                }
              }
            }
          }
          //新菜单
          for(let i=0;i<arr.length;i++){
            if(this.$route.path==arr[i].path){
              this.menuIndex=i;
              this.menuItem=arr[i];
              localStorage.setItem("menuIndex",i);
              localStorage.setItem("menuItem",JSON.stringify(arr[i]));
            }else{
              // alert(2);
              let child=arr[i].child || [];
              for(let j=0;j<child.length;j++){
                if(this.$route.path==child[j].path){
                  this.menuIndex=i;
                  this.menuItem=arr[i];
                  localStorage.setItem("menuIndex",i);
                  localStorage.setItem("menuItem",JSON.stringify(arr[i]));
                }
              }
            }
          }
          // console.log(path,activePath,'path');
          let firstEnter = this.$router.query && this.$router.query.v || '';
          if (this.$route.path !== '/') {
            localStorage.setItem('thisPage', this.$route.path);
          }
          if (localStorage.getItem("menuIndex")) {
            this.menuIndex=localStorage.getItem("menuIndex");
          } else {
            this.menuIndex=0;
          }
          if (localStorage.getItem("menuItem")) {
            this.menuItem=JSON.parse(localStorage.getItem("menuItem"));
          } else {
            this.menuItem="";
          }
          // if(!activePath && path!='/screen2' && path!='/login' && !firstEnter){
          // this.$router.push('/noAuth');
          // }
        })
      },
      extendsRoutes(newVal, oldVal) {
        this.$nextTick(() => {
          this.activePage.splice(0, this.activePage.length);
          let path = this.$route.path;
          let arr = newVal;
          for (let i = 0; i < arr.length; i++) {
            //一级标题
            if (arr[i].path == path) {
              this.activePage.push({name: arr[i].name, path: arr[i].path,});
              //监听路由变化改变菜单active
              this.activeIndex2 = i;
            } else {
              // 二级标题
              let arr1 = arr[i].child;
              for (let j = 0; j < arr1.length; j++) {
                if (arr1[j].path == path) {
                  this.activePage.push({name: arr[i].name, path: arr[i].path,});
                  this.activePage.push({name: arr1[j].name, path: arr1[j].path,});
                  //监听路由变化改变菜单active
                  this.activeIndex2 = arr1[j].index;
                } else {
                  //三级标题
                  let arr2 = arr1[j].child;
                  for (let k = 0; k < arr2.length; k++) {
                    if (arr2[k].path == path) {
                      this.activePage.push({name: arr[i].name, path: arr[i].path,});
                      this.activePage.push({name: arr1[j].name, path: arr1[j].path,});
                      this.activePage.push({name: arr2[k].name, path: arr2[k].path,});
                      //监听路由变化改变菜单active
                      this.activeIndex2 = arr2[k].index;
                    }
                  }
                }
              }
            }
          }
        })
      },
    },
    methods: {
      changeMenu(item, index) {
        if(this.menuIndex==index){
          return;
        }
        this.menuIndex = index;
        this.menuItem = item;
        let activePath=item.child.length && item.child[0].path || item.path;
        this.thisPagePath=activePath;
        this.$router.push(activePath);
        // console.log(this.menuItem, 'index');
        localStorage.setItem("menuIndex", index);
        localStorage.setItem("menuItem", JSON.stringify(item));
      },
      goBigcreen(){
        this.$router.push('/screen3/topoScreen');
      },
      changeErrorStatus(status) {
        this.doError = true;
        this.errorAlert = status;
      },
      getMenu() {
        // console.log(this.activeIndex2, 'index2');
        this.extendsRoutes.splice(0, this.extendsRoutes.length);
        let url = this.$store.state.port + "/auth/menu/get";
        this.$axios.get(url).then(response => {
          if (response && response.data.code == 0) {
            let data = response && response.data.data || [];
            if(data.length<1){
              this.$router.push('/noAuth');
              return;
            }
            // let data=[{"id":19,"name":"网络管理","parentId":-1,"path":null,"icon":null,"sysType":null,"resType":null,"sort":null,"child":[{"id":20,"name":"设备管理","parentId":19,"path":"/device","icon":null,"sysType":null,"resType":null,"sort":null,"child":[]},{"id":21,"name":"链路管理","parentId":19,"path":"/net4","icon":null,"sysType":null,"resType":null,"sort":null,"child":[]},{"id":22,"name":"用户管理","parentId":19,"path":"/net2","icon":null,"sysType":null,"resType":null,"sort":null,"child":[]},{"id":23,"name":"业务管理","parentId":19,"path":"/net3","icon":null,"sysType":null,"resType":null,"sort":null,"child":[]},{"id":24,"name":"时间管理","parentId":19,"path":"/time","icon":null,"sysType":null,"resType":null,"sort":null,"child":[]}]},{"id":25,"name":"事件管理","parentId":-1,"path":null,"icon":null,"sysType":null,"resType":null,"sort":null,"child":[{"id":26,"name":"DDOS防护","parentId":25,"path":"/ddos","icon":null,"sysType":null,"resType":null,"sort":null,"child":[]},{"id":27,"name":"告警配置","parentId":25,"path":"/alarmMsg","icon":null,"sysType":null,"resType":null,"sort":null,"child":[]},{"id":28,"name":"管道告警","parentId":25,"path":"/channelAlarm","icon":null,"sysType":null,"resType":null,"sort":null,"child":[]},{"id":29,"name":"时延告警","parentId":25,"path":"/delayAlarm","icon":null,"sysType":null,"resType":null,"sort":null,"child":[]},{"id":30,"name":"DDOS告警","parentId":25,"path":"/ddosAlarm","icon":null,"sysType":null,"resType":null,"sort":null,"child":[]}]},{"id":31,"name":"系统管理","parentId":-1,"path":null,"icon":null,"sysType":null,"resType":null,"sort":null,"child":[{"id":32,"name":"节点管理","parentId":31,"path":"/nodePoint","icon":null,"sysType":null,"resType":null,"sort":null,"child":[]},{"id":33,"name":"用户管理","parentId":31,"path":"/user","icon":null,"sysType":null,"resType":null,"sort":null,"child":[]},{"id":34,"name":"用户组管理","parentId":31,"path":"/userGroup","icon":null,"sysType":null,"resType":null,"sort":null,"child":[]},{"id":35,"name":"数据备份","parentId":31,"path":"/backups","icon":null,"sysType":null,"resType":null,"sort":null,"child":[]},{"id":36,"name":"指令任务","parentId":31,"path":"/execute","icon":null,"sysType":null,"resType":null,"sort":null,"child":[]},{"id":37,"name":"日志管理","parentId":31,"path":"/log","icon":null,"sysType":null,"resType":null,"sort":null,"child":[]},{"id":38,"name":"IP管理","parentId":31,"path":"/ipList","icon":null,"sysType":null,"resType":null,"sort":null,"child":[]}]},{"id":1,"name":"首页","parentId":-1,"path":"/dashboard","icon":null,"sysType":null,"resType":null,"sort":1,"child":[]},{"id":2,"name":"网络监控","parentId":-1,"path":"","icon":null,"sysType":null,"resType":null,"sort":1,"child":[{"id":3,"name":"链路监控","parentId":2,"path":"/monitor2","icon":null,"sysType":null,"resType":null,"sort":2,"child":[]},{"id":4,"name":"业务监控","parentId":2,"path":"/monitor4","icon":null,"sysType":null,"resType":null,"sort":2,"child":[]},{"id":5,"name":"用户监控","parentId":2,"path":"/monitor3","icon":null,"sysType":null,"resType":null,"sort":2,"child":[]}]},{"id":6,"name":"历史统计","parentId":-1,"path":null,"icon":null,"sysType":null,"resType":null,"sort":1,"child":[{"id":7,"name":"链路统计","parentId":6,"path":"/link","icon":null,"sysType":null,"resType":null,"sort":2,"child":[]},{"id":8,"name":"业务统计","parentId":6,"path":"/service","icon":null,"sysType":null,"resType":null,"sort":2,"child":[]},{"id":9,"name":"用户统计","parentId":6,"path":"/party","icon":null,"sysType":null,"resType":null,"sort":2,"child":[]},{"id":10,"name":"全网统计","parentId":6,"path":"/monitor","icon":null,"sysType":null,"resType":null,"sort":2,"child":[]},{"id":11,"name":"域名统计","parentId":6,"path":null,"icon":null,"sysType":null,"resType":null,"sort":2,"child":[]}]},{"id":12,"name":"网络优化","parentId":-1,"path":null,"icon":null,"sysType":null,"resType":null,"sort":1,"child":[{"id":18,"name":"策略管控","parentId":12,"path":"/policy","icon":null,"sysType":null,"resType":null,"sort":null,"child":[]},{"id":13,"name":"管道管理","parentId":12,"path":"/channel","icon":null,"sysType":null,"resType":null,"sort":2,"child":[]},{"id":14,"name":"一键优化","parentId":12,"path":"/optimize","icon":null,"sysType":null,"resType":null,"sort":2,"child":[]},{"id":15,"name":"批量部署","parentId":12,"path":"/batch","icon":null,"sysType":null,"resType":null,"sort":2,"child":[]},{"id":16,"name":"实时评估","parentId":12,"path":"/assess","icon":null,"sysType":null,"resType":null,"sort":2,"child":[]}]}];
            for (let i = 0; i < data.length; i++) {
              data[i].index = (i + 1);
              let arr2 = data[i].child;
              let n = 0;
              for (let j = 0; j < arr2.length; j++) {
                let arr3 = arr2[j].child;
                if (arr3.length > 0) {
                  for (let k = 0; k < arr3.length; k++) {
                    n++;
                    arr3[k].index = (i + 1) + "-" + n;
                  }
                } else {
                  arr2[j].index = (i + 1) + '-' + (j + 1);
                }
              }
            }
            this.extendsRoutes = data;
            // console.log(this.extendsRoutes, 'data');
            //动态添加路由
            // for(let i=0;i<this.extendsRoutes.length;i++){
            //   if(this.extendsRoutes[i].child.length>0){
            //     let arr=this.extendsRoutes[i].child;
            //     for(let i=0;i<arr.length;i++){
            //       this.$router.options.routes.push(arr[i]);
            //     }
            //   }else{
            //     this.$router.options.routes.push(this.extendsRoutes[i]);
            //   }
            // }
            sessionStorage.setItem('menus', JSON.stringify(this.extendsRoutes));
            // console.log(this.extendsRoutes, 'menu');
            // this.$router.push('/dashboard');
            // this.extendsRoutes = [
            //   {path: '/dashboard',name:'dashboard',index:'1',show:true,meta:{name: '首页'},children:[]},
            //   {path: '',name:'',index:'2',show:true,meta:{name: '网络监控'},children:[
            //       {path: '',name:'',show:true,meta:{name: '监测'},children:[
            //           {path: '/monitor2',index:'2-1',name:'monitor1',show:true,meta:{name: '链路'},children:[]},
            //           {path: '/monitor1',index:'2-2',name:'monitor2',show:true,meta:{name: '管道'},children:[]},
            //           {path: '/monitor3',index:'2-3',name:'monitor3',show:true,meta:{name: '用户'},children:[]},
            //           {path: '/monitor4',index:'2-4',name:'monitor4',show:true,meta:{name: '业务'},children:[]},
            //         ]},
            //       {path: '',name:'',show:true,meta:{name: '统计'},children:[
            //           {path: '/monitor',index:'2-5',name:'monitor',show:true,meta:{name: '全网'},children:[]},
            //           {path: '/channelStatistics',index:'2-6',name:'channelStatistics',show:true,meta:{name: '管道'},children:[]},
            //           {path: '/party',index:'2-7',name:'party',show:true,meta:{name: '用户'},children:[]},
            //           {path: '/service',index:'2-8',name:'service',show:true,meta:{name: '业务'},children:[]},
            //           {path: '/link',index:'2-9',name:'link',show:true,meta:{name: '链路'},children:[]},
            //           {path: '/node',index:'2-5',name:'history',show:false,meta:{name: '节点'},children:[]},
            //         ]},
            //     ]},
            //   {path: '/tactics',name:'tactics',index:'3',show:false,meta:{name: '策略管理'},children:[]},
            //   {path: '',name:'',index:'4',show:false,meta:{name: '网络事件'},children:[
            //       {path: '',name:'',show:true,meta:{name: '告警'},children:[
            //           {path: '/alarm/1',name:'alarmSet',index:'4-1',show:true,meta:{name: 'DDOS'},children:[], component: resolve => require(['@/components/AlarmSet'], resolve)},
            //           {path: '/alarm/2',name:'alarmSet',index:'4-2',show:true,meta:{name: '策略告警'},children:[], component: resolve => require(['@/components/AlarmSet'], resolve)},
            //           {path: '/alarm/3',name:'alarmSet',index:'4-3',show:true,meta:{name: '时延'},children:[], component: resolve => require(['@/components/AlarmSet'], resolve)},
            //         ]},
            //       {path: '/alarm/5',name:'alarmSet',index:'4-4',show:true,meta:{name: '未识别'},children:[
            //           // {path: '/alarm/1',name:'alarmSet',index:'4-4',show:true,meta:{name: '未识别'},children:[], component: resolve => require(['@/components/AlarmSet'], resolve)},
            //         ]},
            //     ]},
            //   {path: '',index:'5',name:'',show:true,meta:{name: '网络优化'},children:[
            //       {path: '',index:'',name:'',show:true,meta:{name: '管道'},children:[
            //           {path: '/networkOptimize/1',index:'5-1',name:'networkOptimize',show:true,meta:{name: '一级管道'},children:[]},
            //           {path: '/networkOptimize/2',index:'5-2',name:'networkOptimize',show:true,meta:{name: '二级管道'},children:[]},
            //           {path: '/networkOptimize/3',index:'5-3',name:'networkOptimize',show:true,meta:{name: '三级管道'},children:[]},
            //           {path: '/channel',index:'5-4',name:'channel',show:true,meta:{name: '管道'},children:[]},
            //           {path: '/channel1',index:'5-5',name:'channel1',show:false,meta:{name: '管道1'},children:[]},
            //         ]},
            //       {path: '/qos',name:'backups',index:'5-4',show:true,meta:{name: 'QOS'},children:[]},
            //     ]},
            //   {path: '/net',name:'net',index:'6',show:true,meta:{name: '网络管理'},children:[
            //       {path: '',name:'',show:true,meta:{name: ''},children:[
            //           {path: '/net/1',index:'6-1',name:'net1',show:true,meta:{name: '子网'},children:[]},
            //           {path: '/net1',index:'6-5',name:'net1',show:false,meta:{name: '子网新'},children:[]},
            //           {path: '/net4',index:'6-2',name:'net',show:true,meta:{name: '链路'},children:[]},
            //           {path: '/net2',index:'6-3',name:'net2',show:true,meta:{name: '用户'},children:[]},
            //           {path: '/net/3',index:'6-4',name:'net',show:true,meta:{name: '业务'},children:[]},
            //         ]},
            //     ]},
            //   {path: '',name:'',index:'7',show:true,meta:{name: '系统管理'},children:[
            //       {path: '',name:'',show:true,meta:{name: ''},children:[
            //           {path: '/user',index:'7-1',name:'user',show:true,meta:{name: '用户'},children:[]},
            //           {path: '/role',index:'7-2',name:'role',show:true,meta:{name: '权限'},children:[]},
            //           {path: '/backups',index:'7-3',name:'backups',show:true,meta:{name: '数据备份'},children:[]},
            //           {path: '/nfv',index:'7-4',name:'nfv',show:false,meta:{name: 'NFV'},children:[]},
            //           {path: '/execute',index:'7-5',name:'execute',show:true,meta:{name: '指令任务'},children:[]},
            //           {path: '/log',index:'7-6',name:'log',show:true,meta:{name: '日志查询'},children:[]},
            //         ]},
            //     ]},
            // ]

            // 存菜单
            sessionStorage.setItem('menus', JSON.stringify(this.extendsRoutes));
          }
        }).catch(e => {

        })
      },
      startTask() {
        // 执行全局指令任务
        //获取所有子网
        let url = this.$store.state.port + "/settingPush/execute/all.do";
        this.$axios.get(url).then(response => {
          if (response && response.data.code == 0) {
            this.$store.commit("setDoError", true);
            this.$store.commit("setErrorAlert", false);
          } else {
            this.$store.commit("setDoError", true);
            this.$store.commit("setErrorAlert", true);
          }
        }).catch(e => {
          this.$store.commit("setDoError", true);
          this.$store.commit("setErrorAlert", true);
        })
      },
      reload() {
        this.isRouterAlive = false
        this.$nextTick(function () {
          this.isRouterAlive = true
        })
      },
      sendId(id) {
        // console.log(id);
      },
      handleCommand(command) {
        // console.log(command);
      },
      getNode() {
        //获取所有子网
        let url = this.$store.state.port + "/networkNode/getAll.do";
        this.$axios.get(url).then(response => {
          this.nodeList = response.data || [];
          if (localStorage.getItem('nodeId')) {
            this.nodeId = localStorage.getItem("nodeId");
          }
          let flag = false;
          for (let i = 0; i < this.nodeList.length; i++) {
            if (this.nodeId == this.nodeList[i].id) {
              flag = true;
              break;
            }
          }
          // if (!flag) {
          //   this.nodeId = this.nodeList[0].id;
          //   localStorage.setItem("nodeId", this.nodeId);
          // }
        }).catch(e => {
          this.nodeList = [];
        })
      },
      showBtn() {
        // this.showLog = !this.showLog;
      },
      handleCommand(command) {
        if (command == 'a') {
          this.logOut();
        }
      },
      handleSelect(key, keyPath) {
        this.activeIndex2 = key;
        localStorage.setItem("activeMenu", key);
      },
      search() {
        this.queryData();
      },
      queryData() {
        // console.log("搜索");
      },
      toggleNavbar() {
        $("#example-navbar-collapse").slideToggle()
        // this.showNavbar=!this.showNavbar
      },
      menuClick: function (item, subIndex, index) {
        if (subIndex != 'index') {
          this.activeId = parseInt(index);
          this.activeItem = parseInt(subIndex);
          this.hasChildren = true;
        } else {
          this.activeId = index;
          this.activeItem = null;
          this.hasChildren = false;
        }
        sessionStorage.setItem('activeId', this.activeId)
        sessionStorage.setItem('activeItem', this.activeItem)
        if (this.$route.path == item.url) {
          return;
        } else {
          this.$router.push(item.url);
        }
      },
      isLogin() {
        this.activeIndex2 = localStorage.getItem("activeMenu");
        this.getMenu();
      },
      getMenuList: function () {

      },
      changePwd() {
        this.dialogVisible = true;
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let url = this.$store.state.port + "/user/updatePwd.do";
            let data = {
              newPassword: this.ruleForm.newPwd,
              originalPassword: this.ruleForm.oldPwd,
            };
            this.$axios.post(url, this.$qs.stringify(data)).then(response => {
              if (response.data.code == 1) {
                this.showError = true;
                this.errorMessage = response.data.message;
                this.dialogVisible = true;
                return;
              }
              this.showError = false;
              this.errorMessage = "";
              this.dialogVisible = false;
              this.$router.push('/login');
            }).catch(e => {
              this.showError = true;
              this.errorMessage = "修改失败";
              this.dialogVisible = true;
            });
          } else {
            return false;
          }
        });
      },
      logOut() {
        //测试
        // this.$router.push('/login');
        this.showLog = false;
        this.$store.commit("setStatus", true);
        // console.log(this.$store.state.isLoading, 1);
        let url = this.$store.state.port + "/auth/loginOut";
        // let url = this.$store.state.port + "/auth/loginOut.do";
        this.$axios.get(url).then(response => {
          this.$store.commit("setStatus", false);
          // console.log(this.$store.state.isLoading, 2);
          let arr = document.cookie.split(";");
          let exp = new Date();
          exp.setTime(exp.getTime() + (-1 * 24 * 60 * 60 * 1000));
          document.cookie = "advertiser_id=1;expires=" + exp.toGMTString();
          this.$store.commit("setStatus", false);
          localStorage.removeItem("advertiser_id");
          localStorage.removeItem("user");
          // localStorage.setItem("didNum", "");
          // localStorage.setItem("deviceId", "");
          // localStorage.setItem("deviceName", "");
          localStorage.removeItem("deviceId");
          localStorage.removeItem("didNum");
          localStorage.removeItem("deviceName");
          localStorage.removeItem("activeMenu");
          localStorage.removeItem("menuItem");
          localStorage.removeItem("activeIndex");
          localStorage.removeItem("menuIndex");
          localStorage.removeItem("thisPage");
          this.$store.commit("setIsLoad", false);
          this.$router.push('/login');
          // console.log(this.$store,'store')
        }).catch(error => {
          this.$store.commit("setStatus", false);
        })
      }
    }
  }
</script>
<style lang="less" scoped type="text/less">
  .updatePage {
    margin-left: 0.6rem;
    height: 3rem;
    div {
      height: 1.8rem;
      margin-top: 0.6rem;
      line-height: 1.8rem;
      margin-left: 0 !important;
      padding: 0 0.8rem;
    }
  }

  .titleLine {
    width: 1px;
    height: 3rem;
    background: #4D5C73;
  }

  .header-title {
    /*z-index: 2;*/
  }

  .alertTitleDiv {
    position: absolute;
    left: 50%;
    top: 116%;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, 0%);
    min-width: 50px;
    background: #fff;
    padding: 3px 8px;
    font-size: 12px !important;
    box-shadow: 0 0 3px rgba(197, 197, 197, 0.6);
    .icon-quxiao1 {
      color: #e41610;
    }
    .icon-zhengque {
      color: #2ebd12;
    }
  }

  .close-icon-up {
    display: inline-block;
    transition: all linear 0.2s;
  }

  .close-icon-drop {
    transform: rotate(-180deg);
  }
  .activePageTitle {
    color: #000;
    span {
      padding: 0px 0px 0px 10px;
      font-size: 12px;
      float: left;
      position: relative;
      margin-left: -8px;
      background: url("./assets/menuBg.png") no-repeat;
      background-size: 100% 100%;
      a{
        color: #000;
        padding-right: 30px;
      }
    }
    span:first-child{
      margin-left: 0;
    }
    .menuActive{
      color: #fff;
      background: url("./assets/menuBgActive.png") no-repeat;
      background-size: 100% 100%;
      a{
        color: #fff;
      }
    }
  }
  @media screen and (max-width: 1300px){
    .activePageTitle {
      color: #000;
      span {
        /*padding: 2px 0px 2px 10px;*/
      }
    }
  }
  .menu2 {
    .iconfont {
      font-size: inherit;
      color: inherit;
      vertical-align: unset;
    }
  }

  .activePageTitle {
    color: #8fa0ac;
    span {
      span {
        color: #50646f;
        .el-icon {
          font-size: 13px !important;
          margin: 0 4px;
        }
      }
    }
    span:last-child {
      color: #50646f;
    }
  }

  //自定义菜单
  .menu2 {
    .menuTitleBak {
      color: #fff;
      padding: 0 20px;
      font-size: 14px;
      line-height: 23px !important;
    }
  }

  .myMenu {
    float: left;
    height: 100%;
    width: auto;
    .firstMenu {
      float: left;
      height: 100%;
      text-align: center;
      line-height: 60px;
      width: auto;
      min-width: 80px;
      color: #fff;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      font-size: 16px;
      position: relative;
      margin: 0 8px;
      .secondMenu {
        background: #1d2b36;
        color: #fff;
        cursor: pointer;
        display: none;
        padding: 7px 4px;
        position: absolute;
        top: 60px;
        left: 50%;
        width: 140px;
        margin-left: -70px;
        z-index: 999999;
        .thirdMenu {
          float: left;
          width: 65px;
          .thirdMenuTitle {
            height: 36px;
            line-height: 36px;
            font-size: 15px;
            color: #fff;
          }
          .thirdMenuItem {
            height: 36px;
            line-height: 36px;
            font-size: 13px;
            color: #ABB6BC;
            a {
              display: block;
              width: 100%;
              height: 100%;
              color: #ABB6BC;
            }
          }
          .thirdMenuItem:hover {
            a {
              color: #409EFF;
            }
          }
        }
      }
    }
    .firstMenu:hover {
      border-bottom-color: #409EFF;
      color: #409eff;
      .secondMenu {
        display: block;
      }
    }
  }

  #mainPage .headerSearch::placeholder {
    color: #CACDCF !important;
    font-size: 12px;
  }

  #mainPage .headerSearch::-webkit-input-placeholder {
    color: #CACDCF !important;
    font-size: 12px;
  }

  #mainPage .headerSearch::-moz-placeholder {
    font-size: 12px;
    color: #CACDCF !important;
    opacity: 1;
  }

  #mainPage .headerSearch:-ms-input-placeholder {
    font-size: 12px;
  }

  .logout {
    position: absolute;
    top: 3rem;
    left: 0;
    background: #1d2b36;
    color: #fff;
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    font-size: 13px;
    width: 80px;
  }

  .logout:hover {
    color: #409efe;
  }

  .router-view {
    position: absolute;
    left: 230px;
    top: 60px;
  }

  .msg {
    position: relative;
    left: 0;
    user-select: none;
    font-size: 16px;
    span {
      position: absolute;
      top: 1px;
      right: -2px;
      width: 4px;
      height: 4px;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      background: #ED5D01;
    }
  }

  @media screen and (max-width: 1600px) {
    .msg {
      font-size: 15px;
    }

    .header-text {
      font-size: 13px !important;
    }
  }

  @media screen and (max-width: 1400px) {
    .msg {
      font-size: 13px;
    }

    .header-text {
      font-size: 12px !important;
    }
  }

  @media screen and (max-width: 1268px) {
    .msg {
      font-size: 12px;
    }

    .header-text {
      font-size: 12px !important;
    }
  }

  .appHeader {
    background: #1d2b36;
    height: 3rem;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 6666666;
    min-width: 900px;
    .header-right {
      float: right;
      height: 100%;
      display: flex;
      color: #CACDCF;
      min-width: 5rem;
      .pull-left {
        margin-left: 0.6rem;
      }
      @media screen and(max-width: 1600px) {
        .pull-left {
          /*margin-left: 5px;*/
        }
      }
      .user {
        font-size: 0.5rem;
        cursor: pointer;
        min-width: 80px;
        text-align: center;
        height: 3rem;
        line-height: 3rem;
        i {
          font-size: 12px;
        }
        margin-right: 0.5rem;
      }
      align-items: center;
      .input {
        div {
          right: 3px;
          top: 0px;
          color: #fff;
          line-height: 1.8rem;
          position: absolute;
          i {
            padding: 0 7px;
            border-left: 1px solid #ddd;
            border-color: #505E67;
            cursor: pointer;
          }
        }
        position: relative;
        input {
          background: rgb(55, 69, 78);
          padding: 5px 8px;
          border: none;
          outline: none;
          display: inline-block;
          height: 1.8rem;
          color: #fff;
          padding-right: 50px;
          width: 202px;
        }
        @media screen and(max-width: 1400px) {
          input {
            width: 145px;
          }
        }
      }
    }
  }

  .header {
    float: left;
    position: relative;
    z-index: 6;
    padding: 0px 7px;
    overflow: hidden;
    margin-right: 1rem;
    div {
      .header-text {
        height: 25px;
        font-size: 14px;
        line-height: 25px;
        color: #E9E9EC;
        display: inline-block;
        width: 100%;
        font-family: "SimHei";
      }
      height: 3rem;
      line-height: 3rem;
      float: left;
      .line {
        height: 1rem;
        display: inline-block;
        background: #6674A4;
        margin: 1rem 10px;
        width: 2px;
      }
      img {
        height: 63%;
        width: auto;
      }
    }
  }

  @media screen and (max-width: 1600px) {
    .header div {
      img {
        height: 60% !important;
        width: auto;
      }
    }
  }

  @media screen and (max-width: 1300px) {
    .header div {
      img {
        height: 60% !important;
        width: auto;
      }
    }

    .header {
      margin-right: 0.5rem;
    }
  }

  @media screen and (max-width: 1100px) {
    .header div {
      img {
        height: 55% !important;
        width: auto;
      }
    }

    .header {
      margin-right: 0;
    }
  }

  @media screen and (max-width: 1000px) {
    .header div {
      img {
        height: 50% !important;
        width: auto;
      }
    }

    .header {
      margin-right: 0;
    }
  }

  .bg-title {
    background: #ffffff;
    overflow: hidden;
    padding: 15px 15px 10px;
    margin-bottom: 25px;
    .breadcrumb {
      background: none;
      margin-bottom: 0px;
      float: right;
      padding: 0;
      margin-top: 8px;
      a {
        color: rgba(0, 0, 0, 0.5);
      }
      .active {
        color: #f75b36;
      }
    }
  }
</style>
